import React, { Fragment, useState, useEffect } from 'react';
import { Card, Col, Row, Skeleton } from 'antd';
import styles from './style.less';
import { round } from 'lodash';
import { AxCardProps, AxCardColsProps } from './AxCardProps';
import Paragraph from 'antd/lib/typography/Paragraph';
import { router } from 'umi';

/** 分列函数
 * @param items 子项
 * @param cols 列数
 */
const GetCol = (items: any[], cols: number = 3) => {
  const rows: any[] = [];
  let colsObj: any[] = [];
  let nextRow = false;
  let totalSpan = 0;
  if (!Array.isArray(items)) items = [items];
  const len = items.length - 1;
  items.forEach((i, idx) => {
    if (!i || i === false) {
      return;
    }
    let span = Math.trunc(24 / cols);
    if (i.props.cols) span *= i.props.cols;
    totalSpan += span;
    colsObj.push(<Col span={span}>{i}</Col>);
    if (totalSpan >= 24) {
      nextRow = true;
    }
    if (nextRow === true || len === idx) {
      rows.push(
        <Row>
          {colsObj.map((i, idx) => (
            <Fragment key={idx}>{i}</Fragment>
          ))}
        </Row>,
      );
      colsObj = [];
      nextRow = false;
      totalSpan = 0;
    }
  });
  return rows;
};

/** 卡片容器 */
const AxCard: React.FC<AxCardProps> = props => {
  const { children, bordered = false, flex, last = false, height, loading, ...rest } = props;
  const marginBottom = 6;
  let style: any = flex ? { height: ((document.body.clientHeight - 88) * flex) / 24 } : {};
  if (flex && flex < 24 && last === false)
    style = {
      ...style,
      height: style.height - marginBottom,
      marginBottom: marginBottom,
    };
  if (height) style = { height: height };

  let bodyStyle = {};
  if (flex && style && style.height) {
    bodyStyle = {
      height: style.height - 57, //减去Card的title
      overflow: 'auto',
    };
  }

  return (
    <Card
      bordered={bordered}
      size={(window as any).ax.config.size}
      style={style}
      bodyStyle={bodyStyle}
      loading={loading}
      {...rest}
    >
      <Skeleton loading={loading} avatar active>
      </Skeleton>
      <div className={styles.tableList}>
        {children}
        {/* {props.items.map((i, idx) => (<div key={idx}>{i}</div>))} */}
      </div>
    </Card>
  );
};

const gridStyle = (span: number = 1, sum: number) => ({
  width: round(100 * span, -1) / sum + '%',
  boxShadow: '0px 0px 0px 0px',
  padding: '0px',
});

export const AxCardGridThree = (p: any) => (
  <Card.Grid style={gridStyle(p.span, 3)}>
    <Paragraph ellipsis>
      {p.children}
    </Paragraph>
  </Card.Grid>
);

export const AxCardGridTwo = (p: any) => (
  <Card.Grid style={gridStyle(p.span, 2)}>
    <Paragraph ellipsis>
      {p.children}
    </Paragraph>
  </Card.Grid>
);

/** 内部卡片容器 */
export const AxInnerCard: React.FC<any> = props => (
  <Card bordered type="inner" size="small" {...props}>
    {props.children}
  </Card>
);

/** 卡片容器（分列） */
export const AxCardCols: React.FC<AxCardColsProps> = props => {
  const { cols, children, ...rest } = props;

  return (
    <AxCard {...rest}>
      {GetCol(children as any[], cols).map((i, idx) => (
        <Fragment key={idx}>{i}</Fragment>
      ))}
    </AxCard>
  );
};

/** 内部卡片容器（分列） */
export const AxInnerCardCols: React.FC<AxCardColsProps> = props => {
  return <AxCardCols bordered type="inner" size="small" {...props}></AxCardCols>;
};

/** 标题Card */
export const AxTabTitleCard: React.FC<any> = props => {
  const { title, tabList = [], children, ...rest } = props;
  const [tabActiveKey, setTabActiveKey] = useState<any>();

  useEffect(() => {
    const hash = location.hash.substr(1, location.hash.length - 1);
    const find = tabList.find((f: any) => f.url === hash);
    if (find) {
      setTabActiveKey(find.key);
    }
  }, []);

  const onTabChange = (key: any) => {
    const find = tabList.find((f: any) => f.key === key);
    if (find) {
      router.push(find.url);
      setTabActiveKey(find.key);
    }
  }

  return (
    <AxCard
      title={title}
      bodyStyle={{ backgroundColor: 'rgb(240,242,245)' }}
      tabList={tabList}
      activeTabKey={tabActiveKey}
      onTabChange={onTabChange}
      {...rest}
    >
      {children}
    </AxCard>
  );
}

export default AxCard;
